<template>
  <div class="">
    <div class="bg"></div>
     <!--  -->
    <div class="content content--canvas" v-show="show"></div>
  </div>
</template>
 
<script>
// import './js/noise.min.js'
import { floor, rand, randIn, randRange, fadeIn, fadeOut, fadeInOut, dist, angle, lerp, HALF_PI, TAU, TO_RAD } from './js/util.js'
// import './js/swirl.js'
const { PI, cos, sin, abs, sqrt, pow, round, random, atan2 } = Math;

export default {
  data () {
    return {
      animation: null,
      show: true,
      canvas: {
        a: document.createElement('canvas'),
        b: document.createElement('canvas')
      },
      ctx: {
        a: null,
        b: null
      },
      center: [],
    }
  },
  mounted() {
    let _this = this
    setTimeout(() => {
      this.show = true
      _this.init()
    }, 100)
  },
  methods: {
    init() {
      const _this = this
      const particleCount = 700;
      const particlePropCount = 9;
      const particlePropsLength = particleCount * particlePropCount;
      const rangeY = 100;
      const baseTTL = 50;
      const rangeTTL = 150;
      const baseSpeed = 0.1;
      const rangeSpeed = 2;
      const baseRadius = 1;
      const rangeRadius = 4;
      const baseHue = 220;
      const rangeHue = 100;
      const noiseSteps = 8;
      const xOff = 0.00125;
      const yOff = 0.00125;
      const zOff = 0.0005;
      const backgroundColor = 'hsla(260,40%,5%,1)';

      let container;
      // let canvas;
      // let ctx;
      // let center;
      let gradient;
      let tick;
      let simplex;
      let particleProps;
      let positions;
      let velocities;
      
      console.log('该方法如何直接触发')
      function setup() {
        console.log("是否加载")
        createCanvas();
        resize();
        initParticles();
        draw();
      }

      function initParticles() {
        tick = 0;
        simplex = new SimplexNoise();
        particleProps = new Float32Array(particlePropsLength);
        // console.log(particleProps[9])
        let i;
        
        for (i = 0; i < particlePropsLength; i += particlePropCount) {
          initParticle(i);
        }
      }

      function initParticle(i) {
        let x, y, vx, vy, life, ttl, speed, radius, hue;

        x = rand(_this.canvas.a.width);
        y = _this.center[1] + randRange(rangeY);
        vx = 0;
        vy = 0;
        life = 0;
        ttl = baseTTL + rand(rangeTTL);
        speed = baseSpeed + rand(rangeSpeed);
        radius = baseRadius + rand(rangeRadius);
        hue = baseHue + rand(rangeHue);

        particleProps.set([x, y, vx, vy, life, ttl, speed, radius, hue], i);
      }

      function drawParticles() {
        let i;

        for (i = 0; i < particlePropsLength; i += particlePropCount) {
          updateParticle(i);
        }
      }

      function randomNum(minNum,maxNum){ 
        switch(arguments.length){ 
          case 1: 
            return parseInt(Math.random()*minNum+1,10); 
          break; 
          case 2: 
            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
          break; 
            default: 
                return 0; 
            break; 
        } 
      }
      
      function updateParticle(i) {
        let i2=1+i, i3=2+i, i4=3+i, i5=4+i, i6=5+i, i7=6+i, i8=7+i, i9=8+i;
        let n, x, y, vx, vy, life, ttl, speed, x2, y2, radius, hue;

        x = particleProps[i];
        y = particleProps[i2];
        n = simplex.noise3D(x * xOff, y * yOff, tick * zOff) * noiseSteps * TAU;
        vx = lerp(particleProps[i3], cos(n), 0.5);
        vy = lerp(particleProps[i4], sin(n), 0.5);
        life = particleProps[i5];
        ttl = particleProps[i6];
        speed = particleProps[i7];
        x2 = x + vx * speed;
        y2 = y + vy * speed;
        radius = particleProps[i8];
        // hue = particleProps[i9];
        let colors = [35, 207, 182]
        let colorsIndex = randomNum(0,2)
        hue = colors[colorsIndex]
        
        // console.log(hue)

        drawParticle(x, y, x2, y2, life, ttl, radius, hue);

        life++;

        particleProps[i] = x2;
        particleProps[i2] = y2;
        particleProps[i3] = vx;
        particleProps[i4] = vy;
        particleProps[i5] = life;

        (checkBounds(x, y) || life > ttl) && initParticle(i);
      }

      function drawParticle(x, y, x2, y2, life, ttl, radius, hue) {
        _this.ctx.a.save();
        _this.ctx.a.lineCap = 'round';
        _this.ctx.a.lineWidth = radius;
        _this.ctx.a.strokeStyle = `hsla(${hue},100%,60%,${fadeInOut(life, ttl)})`;
        // _this.ctx.a.strokeStyle = `hsla(35,100%,56%,${fadeInOut(life, ttl)})`;
        _this.ctx.a.beginPath();
        _this.ctx.a.moveTo(x, y);
        _this.ctx.a.lineTo(x2, y2);
        _this.ctx.a.stroke()
        _this.ctx.a.closePath();
        _this.ctx.a.restore();
      }

      function checkBounds(x, y) {
        return(
          x > _this.canvas.a.width ||
          x < 0 ||
          y > _this.canvas.a.height ||
          y < 0
        );
      }

      function createCanvas() {
        console.log("xxx")
        container = document.querySelector('.content--canvas');
        // canvas = {
        //   a: document.createElement('canvas'),
        //   b: document.createElement('canvas')
        // };
        console.log(_this.canvas)
        _this.canvas.b.style = `
          position: relation;
          top: 0;
          left: 0;
          width: 100%;
          height: 500px;
        `;
        container.appendChild(_this.canvas.b);
        _this.ctx = {
          a: _this.canvas.a.getContext('2d'),
          b: _this.canvas.b.getContext('2d')
        };
        // center = [];
      }

      function resize() {
        // console.log(canvas)
        const { innerWidth, innerHeight } = window;
        
        _this.canvas.a.width = innerWidth;
        _this.canvas.a.height = innerHeight;

        _this.ctx.a.drawImage(_this.canvas.b, 0, 0);

        _this.canvas.b.width = innerWidth;
        _this.canvas.b.height = innerHeight;
        
        _this.ctx.b.drawImage(_this.canvas.a, 0, 0);

        _this.center[0] = 0.5 * _this.canvas.a.width;
        _this.center[1] = 0.5 * _this.canvas.a.height;
      }

      function renderGlow() {
        _this.ctx.b.save();
        _this.ctx.b.filter = 'blur(8px) brightness(200%)';
        _this.ctx.b.globalCompositeOperation = 'lighter';
        _this.ctx.b.drawImage(_this.canvas.a, 0, 0);
        _this.ctx.b.restore();

        _this.ctx.b.save();
        _this.ctx.b.filter = 'blur(4px) brightness(200%)';
        _this.ctx.b.globalCompositeOperation = 'lighter';
        _this.ctx.b.drawImage(_this.canvas.a, 0, 0);
        _this.ctx.b.restore();
      }

      function renderToScreen() {
        _this.ctx.b.save();
        _this.ctx.b.globalCompositeOperation = 'lighter';
        _this.ctx.b.drawImage(_this.canvas.a, 0, 0);
        _this.ctx.b.restore();
      }

      function draw() {
        tick++;

        _this.ctx.a.clearRect(0, 0, _this.canvas.a.width, _this.canvas.a.height);

        const gradient = _this.ctx.b.createLinearGradient(0, _this.canvas.a.height, 0, 0)
        gradient.addColorStop(0, '#0E2244')
        gradient.addColorStop(1, '#1B3A67')
        // _this.ctx.b.fillStyle = backgroundColor; 
        _this.ctx.b.fillStyle = gradient; 
        _this.ctx.b.fillRect(0, 0, _this.canvas.a.width, _this.canvas.a.height);

        drawParticles();
        renderGlow();
        renderToScreen();

        window.requestAnimationFrame(draw);
      }
      // this.animation = requestAnimationFrame(this.init);
      window.addEventListener('load', setup);
      window.addEventListener('resize', resize);
    }
  },
  destroyed() {
    this.show = false
    alert(this.show)
    // cancelAnimationFrame(this.animation)
  }
}
</script>
 
<style scoped lang="scss">
  .bg{
    width: 100%;
    height: 200px;
    background: #FFA01E;  // hsla(35, 100%, 56%)
    // background: #0F91FF; hsla(207, 100%, 53%)
    // background: #00F8FF; hsla(182, 100%, 50%)
  }
</style>